<template>
    <BookmarkTemplate :bookmarks-list="dataList">
        <p>{{isHasKeyword ? '无匹配的书签项，可前往添加相关书签':'还没有任何历史书签哟，请先添加书签'}}</p>
    </BookmarkTemplate>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useWebStore } from "../../store/webStore";
import BookmarkTemplate from '../../components/bookmarkTemplate.vue'

const store = useWebStore()

const bookmarksList = ref([])
const searchsList = ref([])
const isHasKeyword = ref(false)
const timer = ref(null)

const initialBookmark = () => {
    bookmarksList.value = store.websites.filter(item => item)
}

watch(() => store.websites, () => {
    initialBookmark()
}, {
    deep: true,
    immediate: true
})

const dataList = computed(() => {
    return isHasKeyword.value ? searchsList.value : bookmarksList.value
})

const search = (keyword) => {
    if (timer.value) clearTimeout(timer.value);
    timer.value = setTimeout(() => {
        isHasKeyword.value = keyword ? true : false;
        searchsList.value = bookmarksList.value.filter(item => item.title.indexOf(keyword) > -1 || item.url.indexOf(keyword) > -1)
    }, 500);
}

defineExpose({ search })

</script>

<style lang='scss' scoped>

</style>